// $(function(){}) 只有当页面全部dom被加载完成之后 才会执行里面的代码
$(function () {
  // 获取元素 只要符合变量名规则
  let $loginBtn = $(".login-btn");
  let $telIpt = $("input[name=telephone]");
  let $pwdIpt = $("input[name=password]");
  let $remember = $("input[name=remember]");
  let $smsBtn = $(".sms-captcha");
  let $graphBtn = $(".captcha-graph-img");
  let $registerBtn = $(".register-btn");
  let reg = /^1[3-9][0-9]+\d{8}$/;

  // 登录按钮
  $loginBtn.click(function () {
    // 通常 会在前端 验证一次  后台再验证
    // val 获取输入框的值
    let telVal = $telIpt.val();
    let pwdVal = $pwdIpt.val();
    // trim() 去除字符串的空格  ! 表示取反
    if (!telVal && !telVal.trim()) {
      window.message.showError("手机号不是空的");
      // 返回  下面代码不执行
      return false;
    } else if (!reg.test(telVal)) {
      window.message.showError("手机号格式有误");
      return false;
    }
    let data = {
      "telephone": telVal,
      "password": pwdVal,
    };
    // jq提供的方法  就适用于 合法属性 原生JS:  hasAttribute() 必须要 标签里面有这个属性
    // is 只能判断 合法 但是 标签没有的属性
    let rStatus = $remember.is(":checked");
    // url = http://192.168.31.200:8000/auth/login/?next=/admin/
    let url = window.location.href;
    // next_url = ["http://192.168.31.200:8000/auth/login/?next", "/admin/"]
    let next_url = url.split("=")[1];
    let referrer = document.referrer;
    if (rStatus) {
      data["remember"] = rStatus
    }
    console.log(data);
    $.post({
      url: "/auth/login/",
      data: data,
      success: res => {
        if (res["code"] === 0) {

          // 执行完这句需要1500
          window.message.showSuccess("登录成功");
          // 等待 1.5 之后执行
          setTimeout(() => {
            if (next_url) {
              // 从哪里来回哪里去
              window.location.href = next_url;
            } else if (referrer) {
              window.location.href = referrer;
            }
            else {
              window.location.href = '/';
            }
          }, 1500)
        } else {
          window.message.showError(res["msg"])
        }
      },
      error: err => {
        console.log(err);
        console.log(err.status + '===' + err.statusText);
      }
    })
  });

  // 发送短信验证码
  $smsBtn.click(function () {
    // 获取手机号
    let telVal = $telIpt.val();
    let sStatus = $(this)[0].hasAttribute("disabled");
    if (sStatus) {
      return false;
    }
    if (telVal && telVal.trim()) {
      $.get({
        url: "/auth/send-sms-captcha/",
        data: {
          "telephone": telVal,
        },
        success: res => {
          if (res["code"] === 0) {
            console.log(res);
            $(this).attr("disabled", true);
            // 获取到本来的值  没循环一次 就要获取一次
            let txt = $(this).text();
            let count = 10;
            // 没有移除定时器
            let timer = setInterval(() => {
              $(this).text(count);
              count--;
              if (count < 0) {
                clearInterval(timer);
                $(this).text(txt);
                $(this).removeAttr("disabled");
              }
            }, 1000)
          }
        },
        error: err => {
          console.log(err);
          console.log(err.status + '===' + err.statusText);
        }
      })
    } else {
      window.message.showInfo("手机号不能为空")
    }
  });

  // 刷新图形验证码
  $graphBtn.click(function () {
    let $img = $(this).find("img");
    // url 是有长度限制
    let oldSrc = $img.attr("src");
    let newSrc = oldSrc.split("?")[0] + '?_=' + Date.now();
    $img.attr("src", newSrc);
  });

  // 注册
  // 一般的事件函数 第一个形参 事件
  $registerBtn.click(function (ev) {
    // 禁止默认事件
    ev.preventDefault();
    $.post({
      // ajax看到404 百分之百 url
      url: "/auth/register/",
      data: {
        "telephone": $telIpt.val(),
        "sms_captcha": $("input[name=sms_captcha]").val(),
        "username": $("input[name=username]").val(),
        "password": $("input[name=password]").val(),
        "password_repeat": $("input[name=password_repeat]").val(),
        "graph_captcha": $("input[name=captcha_graph]").val(),
      },
      success: res => {
        if (res["code"] === 0) {
          window.message.showSuccess("注册成功");
          setTimeout(() => {
            window.location.href = '/';
          }, 1500)
        } else {
          window.message.showError(res["message"])
        }
      },
      error: err => {
        console.log(err);
        console.log(err.status + '===' + err.statusText);
      }
    })
  });

});